<template>
	<view class="container">
		<view class="user-area">
			<view class="bg">
				<image :src="bg">
				</image>
				<view class="bg-mask"></view>
			</view>

			<view class="user-area_header self-margin">
				<view class="setting-icon">
					<image v-if="is_current_user == 1" @tap="goto"
						:data-url="`/activity/luntan/user_set?user_id=` + userinfo.id"
						src="../../static/img/setting_while.png"></image>
				</view>

				<view class="user-info ">
					<view class="avatar">
						<image class="avatar-img" :src="userinfo.headimg">
						</image>
					</view>
					<view class="user-right">
						<view class="nickname">
							<text>{{ userinfo.nickname}}</text>
						</view>
						<view class="member">
							<text>微聊 ID:{{ userinfo.id }}</text>
							<view class="sex" v-if="userinfo.sex != 3">
								<image v-if="userinfo.sex == 1" src="../../static/img/male.png"></image>
								<image v-if="userinfo.sex == 2" src="../../static/img/female.png"></image>
							</view>
						</view>

						<view class="address" v-if="user_set.address">
							来自：<text>{{ user_set.address }}</text>
						</view>
					</view>
				</view>

				<view class="brief">
					<text v-if="user_set.about">{{ user_set.about }}</text>
					<text v-else>这个人很赖，什么也没有留下。</text>
				</view>

				<view class="bottom">
					<view class="stats">
						<view class="stat-item" @tap="showFollowPopup">
							<view class="total">
								<text>{{ follow_num}}</text>
							</view>
							<view class="name">
								<text>关注</text>
							</view>
						</view>

						<view class="stat-item" @tap="showFansPopup">
							<view class="total">
								<text>{{ fans }}</text>
							</view>
							<view class="name">
								<text>粉丝</text>
							</view>
						</view>
						<view class="stat-item" >
							<view class="total">
								<text>{{sum_zan}}</text>
							</view>
							<view class="name">
								<text>获赞</text>
							</view>
						</view>
					</view>

					<view class="oper" >
						<view class="follow-btn" v-if="is_current_user != null && is_current_user != 1">
							<uv-button v-if="!is_follow_user" color="#FF1818"
								:custom-style="{width: `168rpx`,height: `56rpx`, borderRadius:`30rpx`, fontSize: `28rpx`}"
								@tap="followIng">关注</uv-button>
							<uv-button v-else color="#dee2e6"
								:custom-style="{width: `168rpx`,height: `56rpx`, borderRadius:`30rpx`, fontSize: `28rpx`, color: `#495057`}"
								@tap="followIng">已关注</uv-button>
						</view>
						<!-- <view class="msg-btn" v-if="user_set.cus_ser_link">
							<view class="btn" @tap="goto" :data-url="'url::' +user_set.cus_ser_link">
								<image src="../../static/img/shortvideo_comment.png"></image>
							</view>
						</view> -->
						
						<view class="msg-btn" >
							
							 <view class="btn" v-if="is_current_user" @tap="goto" :data-url="'url::' +im_h5_url">
								<image src="../../static/img/shortvideo_comment.png"></image>
							</view>
							<view class="btn"  v-else  @tap="goIm">
								<image src="../../static/img/shortvideo_comment.png"></image>
							</view>
							
							<!--<view class="btn" v-else @tap="goto" :data-url="'url::' +im_h5_url + '?to_ext_user_id=' + opt.user_id">
								<image src="../../static/img/shortvideo_comment.png"></image>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main ">
			<dd-tab :itemdata="['图文','商品','短视频']" :itemst="['0', '2','3']" :st="st" :isfixed="false"
				@changetab="changetab"></dd-tab>

			<view class="datalist self-margin" style="margin-top: 16rpx;" v-if="st == '0' || st == '1'">
				<sub-custom-waterfalls-flow :value="handleData(datalist, 'first_pic')" imageKey="first_pic"
					@imageClick="doDetail">
					<!-- #ifdef MP-WEIXIN -->
					<view class="item2" v-for="(item, index) in datalist" :key="index" slot="slot{{index}}"
						:style="index%2==0?'margin-right:2%':''" @tap="goto"
						:data-url="'/activity/luntan/detail?id=' + item.id">
						<view class="f2">
							<view class="t0">
								<text v-text="item.content"></text>
							</view>
							<view class="t1">
								<image class="touxiang" :src="item.headimg" />
							</view>
							<view class="t2">
								<image class="tubiao" src="/static/img/lt_read.png" />{{item.readcount}}
							</view>
							<view class="t3">								
								<image class="tubiao" src="/static/img/lt_pinglun.png" />{{item.plcount}}
							</view>
						</view>

					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
					<template v-slot:default="item">
						<view class="item2" @tap="goto" :data-url="'/activity/luntan/detail?id=' + item.id">
							<view class="f2">
								<view class="t0">
									<text v-text="item.content"></text>
								</view>
								<view class="t1">
									<image class="touxiang" :src="item.headimg" />
								</view>
								<view class="t2">
									<image class="tubiao" src="/static/img/lt_read.png" />{{item.readcount}}
								</view>
								<view class="t3">
									<image class="tubiao" src="/static/img/lt_pinglun.png" />{{item.plcount}}
								</view>
							</view>
						</view>
					</template>
					<!-- #endif -->

					<!-- #ifdef MP-TOUTIAO -->
					<template v-slot:default="{item}">
						<view class="item2" @tap="goto" :data-url="'/activity/luntan/detail?id=' + item.id">
							<view class="f2">
								<view class="t0">
									<text v-text="item.content"></text>
								</view>
								<view class="t1">
									<image class="touxiang" :src="item.headimg" />
								</view>
								<view class="t2">
									<image class="tubiao" src="/static/img/lt_read.png" />{{item.readcount}}
								</view>
								<view class="t3">
									<image class="tubiao" src="/static/img/lt_pinglun.png" />{{item.plcount}}
								</view>
							</view>
						</view>
					</template>
					<!-- #endif -->
				</sub-custom-waterfalls-flow>

				<nodata v-if="nodata1"></nodata>
				<nomore v-if="nomore1"></nomore>
			</view>

			<view class="product self-margin" v-if="st == '2'">
				<dp-product-itemlist :data="productlist"></dp-product-itemlist>
				<nodata v-if="nodata2"></nodata>
				<nomore v-if="nomore2"></nomore>
			</view>

			<view class="product self-margin" v-if="st == '3'">
									<customWaterfallsFlow :value="videoList" :textShowIn="true" imageKey="coverimg"
					@imageClick="gotoDetail">
					<!-- #ifdef MP-WEIXIN -->
					<view v-for="(item, index) in videoList" :key="index" class="item"
						:style="index%2==0?'margin-right:2%':''" slot="slot{{index}}" @tap="goto"
						:data-url="'detail?id=' + item.id +'&cid='+item.cid">
						<view class="f2">
							<view class="t0">
							<!--微信小程序隐藏<text v-text="item.name"></text>-->
							</view>
							<view class="t1">
							<!--微信小程序隐藏<image class="touxiang" :src="item.binfo.logo" style="width: 30rpx; height: 30rpx;"/>-->
							</view>
							<view class="t2">
							<!--微信小程序隐藏<image class="tubiao" src="/static/img/shortvideo_playnum.png" style="width: 25rpx; height: 25rpx;"/>{{item.view_num}}-->
							</view>
							<view class="t3">
							<!--微信小程序隐藏<image class="tubiao" src="/static/img/shortvideo_likenum.png" style="width: 25rpx; height: 25rpx;" />{{item.zan_num}}-->
							</view>
						</view>
 
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN  || MP-TOUTIAO--->
					<template v-slot:default="item">
						<view class="item" @tap="goto" :data-url="'detail?id=' + item.id +'&cid='+st">
							<view class="f2">
								<view class="t0">
									<text v-text="item.name"></text>
								</view>
								<view class="t1">
									<image class="touxiang" :src="item.binfo.logo" />
								</view>
								<view class="t2">
									<image class="tubiao" src="/static/img/shortvideo_playnum.png" />
									{{item.view_num}}
								</view>
								<view class="t3">
									<image class="tubiao" src="/static/img/shortvideo_likenum.png" />
									{{item.zan_num}}
								</view>
							</view>

						</view>
					</template>
					<!-- #endif -->
				</customWaterfallsFlow>
				<nodata v-if="nodata3"></nodata>
				<nomore v-if="nomore3"></nomore>
			</view>






		</view>
		<loading v-if="loading"></loading>
		<popmsg ref="popmsg"></popmsg>

		<liu-popup height="1096rpx" radius="12px" type="bottom" ref="followPopup" :isMask="false">
			<view class="popup-container">
				<view class="popup-header">
					<text>关注用户</text>
				</view>

				<view class="popup-main">

					<scroll-view :scroll-y="true" class="popup-list follow-user-list"
						@scrolltolower="popupScrollTolower($event,'follow')">
						<uni-list>
							<block v-for="(item, index) in followUserList" :key="index">
								<uni-list-item :title="item.nickname" :thumb="item.headimg" thumb-size="lg" clickable
									link :to="`/activity/luntan/user?user_id=${item.follow_user_id}`"></uni-list-item>
							</block>


						</uni-list>
						<!-- <view class="popup-list-item follow-user-item" v-for="(item, index) in followUserList"
						:key="index">

						                
					</view> -->
						<nomore v-if="follow_nomore"></nomore>
						<nodata v-if="follow_nodata"></nodata>
					</scroll-view>
				</view>


			</view>
		</liu-popup>

		<liu-popup height="1096rpx" radius="12px" type="bottom" ref="fansPopup" :isMask="false">
			<view class="popup-container">
				<view class="popup-header">
					<text>粉丝</text>
				</view>

				<view class="popup-main">

					<scroll-view :scroll-y="true" class="popup-list fans-user-list"
						@scrolltolower="popupScrollTolower($event,'fans')">
						<uni-list>
							<block v-for="(item, index) in fansUserList" :key="index">
								<uni-list-item :title="item.nickname" :thumb="item.headimg" thumb-size="lg" clickable
									link :to="`/activity/luntan/user?user_id=${item.mid}`"></uni-list-item>
							</block>


						</uni-list>
						<!-- <view class="popup-list-item follow-user-item" v-for="(item, index) in followUserList"
						:key="index">
		
						                
					</view> -->
						<nomore v-if="fans_nomore"></nomore>
						<nodata v-if="fans_nodata"></nodata>
					</scroll-view>
				</view>


			</view>
		</liu-popup>
		
		<liu-popup height="1096rpx" radius="12px" type="bottom" ref="zanPopup" :isMask="false">
			<view class="popup-container">
				<view class="popup-header">
					<text>点赞</text>
				</view>
		
				<view class="popup-main">
		
					<scroll-view :scroll-y="true" class="popup-list zan-user-list"
						@scrolltolower="popupScrollTolower($event,'zan')">
						<uni-list>
							<block v-for="(item, index) in zanUserList" :key="index">
								<uni-list-item :title="item.nickname" :thumb="item.headimg" thumb-size="lg" clickable
									link :to="`/activity/luntan/user?user_id=${item.mid}`"></uni-list-item>
							</block>
		
		
						</uni-list>
						<!-- <view class="popup-list-item follow-user-item" v-for="(item, index) in followUserList"
						:key="index">
		
						                
					</view> -->
						<nomore v-if="zan_nomore"></nomore>
						<nodata v-if="zan_nodata"></nodata>
					</scroll-view>
				</view>
		
		
			</view>
		</liu-popup>
	<dp-tabbar :opt="opt"></dp-tabbar>

	</view>

</template>
<script>
	var app = getApp();
	import subCustomWaterfallsFlow from './omponents/sub-custom-waterfalls-flow/sub-custom-waterfalls-flow.vue'
	import liuPopup from './omponents/liu-popup/liu-popup.vue';
	import siteInfo from '@/siteinfo.js'
	import customWaterfallsFlow from "@/activity/luntan/omponents/custom-waterfalls-flow/custom-waterfalls-flow.vue"
import siteinfo from '@/siteinfo.js';

	export default {
		components: {
			"sub-custom-waterfalls-flow": subCustomWaterfallsFlow,
			liuPopup,
			customWaterfallsFlow
		},
		data() {
			return {
				bg: siteInfo.siteroot + '/static/images/luntan_user_bg.jpg',
				im_h5_url: siteinfo.im_h5_url,
				st: '0',
				business: null,
				userinfo: null,
				opt: null,
				data: [],
				datalist: [],
				productlist: [],
				pagenum: 1,
				pagenum2: 1,
				nodata1: false,
				nomore1: false,
				nodata2: false,
				nomore2: false,
				// 短视频底部
				nodata3: false,
				nomore3: false,
				pagenum3: 1,
				videoList: [],
				loading: false,
				isload: false,
				user_set: {},
				is_current_user: null,
				is_follow_user: 0,
				sum_zan: 0,
				fans: 0,
				follow_num: 0,
				followUserList: [],
				follow_nomore: false,
				follow_user_list_page_num: 0,
				follow_nodata: false,
				fansUserList: [],
				fans_nomore: false,
				fans_user_list_page_num: 0,
				fans_nodata: false,
				zanUserList: [],
				zan_nomore: false,
				zan_user_list_page_num: 0,
				zan_nodata: false,
				chat_user_id:0,

			}
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getconfig()
			this.getdata();
		},
		onShow() {
			this.getconfig()
		},
		watch: {
			st(now, old) {
				if (now == '0') {
					this.getdata()
				} else if (now == '1') {
					this.getdata()
				} else if (now == '2') {
					//code
					this.getDataList()
				} else if (now == '3') {
					//code
					this.getVideoList()
				}
			}
		},
		onReachBottom: function() {
			if (!this.nodata1 && !this.nomore1 && this.st == '1') {
				this.pagenum = this.pagenum + 1;
				this.getdata(true);
			}
			console.log('onReachBottom')
			if (!this.nodata2 && !this.nomore2 && this.st == '2') {

				this.pagenum2 = this.pagenum2 + 1;
				this.getDataList(true);
			}
			if (!this.nodata3 && !this.nomore3 && this.st == '3') {
				this.pagenum3 = this.pagenum3 + 1;
				this.getVideoList(true);
			}
		},
		methods: {
			gotoDetail(e) {
				// 短视频跳转
				const params = {
					currentTarget: {
						dataset: {
							url: '/activity/shortvideo/detail?showTabbar=true&id=' + e.id + '&cid=' + e.cid
						}
					}
				}
				this.goto(params)
			},
			getconfig() {
				const that = this
				app.get('ApiLuntan/getConfig', {
					user_id: that.opt.user_id
				}, function(res) {
					if (res.data) {
						that.business = res.data.business
						that.userinfo = res.data.userinfo
						that.user_set = res.data.luntan_user_set
						that.is_current_user = res.data.is_current_user
						that.is_follow_user = res.data.is_follow_user
						that.sum_zan = res.data.zan
						that.fans = res.data.fans
						that.follow_num = res.data.follow_num
						that.chat_user_id = res.data.userinfo.im_user_id
						console.log("chat_user_id")
						console.log(that.chat_user_id)
					}
				})
			},
			getdata: function(loadmore) {
				var that = this;
				app.showLoading('加载中');
				if (!loadmore) {
					that.pagenum = 1;
					that.datalist = [];
				}
				var pagenum = that.pagenum;

				that.nodata1 = false;
				that.nomore1 = false;
				that.loading = true;
				app.post('ApiLuntan/fatielog', {
					type: that.st,
					pagenum: pagenum,
					user_id: that.opt.user_id
				}, function(res) {
					app.showLoading(false);
					that.loading = false;
					var data = res.data;
					if (pagenum == 1) {
						that.datalist = data;
						if (data.length == 0) {
							that.nodata1 = true;
						}
						that.loaded();
					} else {
						if (data.length == 0) {
							that.nomore1 = true;
						} else {
							var datalist = that.datalist;
							var newdata = datalist.concat(data);
							that.datalist = newdata;
						}
					}
				});
			},

			changetab: function(st) {
				this.pagenum = 1;
				this.st = st;
				this.datalist = [];


				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.$forceUpdate()
			},
			handleData(data, key) {
				const newArr = new Array()
				data.forEach(item => {
					if (item.pics && Array.isArray(item.pics)) {
						Object.defineProperty(item, key, {
							enumerable: true,
							configurable: true,
							writable: true,
							value: item.pics[0]
						})
					}
					console.log('item', item)
					newArr.push(item)
				})

				return newArr
			},
			getDataList(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}
				var that = this;
				if (!that.business) {
					that.nodata2 = true
					return false
				}
				var pagenum = that.pagenum2;
				var st = that.st;
				that.loading = true;
				that.nodata2 = false;
				that.nomore2 = false;

				app.post('ApiBusiness/getdatalist', {
					id: that.business.id,
					pagenum: pagenum,
					yuyue_cid: that.yuyue_cid
				}, function(res) {
					that.loading = false;
					uni.stopPullDownRefresh();
					var data = res.data;
					if (pagenum == 1) {
						that.productlist = data;
						if (data.length == 0) {
							that.nodata2 = true;
						}
					} else {
						if (data.length == 0) {
							that.nomore2 = true;
						} else {
							var datalist = that.productlist;
							var newdata = datalist.concat(data);
							that.productlist = newdata;
						}
					}
				});
			},
			getVideoList(loadmore) {
				if (!loadmore) {
					this.pagenum3 = 1;
					this.videoList = [];
				}
				var that = this;

				var pagenum = that.pagenum3;
				that.loading = true;
				that.nodata3 = false;
				that.nomore3 = false;



				app.post('ApiShortvideo/index', {
					pagenum: pagenum,
					st: "all",
					user_id: that.opt.user_id


				}, function(res) {
					that.loading = false;
					var data = res.datalist;
					if (pagenum == 1) {
						that.videoList = data;
						if (data.length == 0) {
							that.nodata3 = true;
						}
					} else {
						if (data.length == 0) {
							that.nomore3 = true;
						} else {
							var datalist = that.videoList;
							var newdata = datalist.concat(data);
							that.videoList = newdata;
						}
					}
				});


			},
			followIng() {
				const that = this
				const follow_user_id = that.opt.user_id
				app.get('ApiLuntan/followIng', {
					follow_user_id,
				}, (res) => {
					if (res.status) {
						that.is_follow_user = !that.is_follow_user
						that.getconfig()
					}
				})
			},

			showFollowPopup() {
				if (this.is_current_user) {
					this.$refs.followPopup.open()
					this.getFollowUserList()
				}
			},
			goIm(){
				const that = this
			
				//如果我没登陆
				if( !app.globalData.im_user_id || app.globalData.im_user_id == 0){
					let frompage = encodeURIComponent(app._fullurl());
					app.goto('/pages/index/login?frompage=' + frompage);
				
				}
				
				
				else if(app.globalData.im_url  && app.globalData.im_user_id && app.globalData.im_user_id >0 && that.chat_user_id > 0 ){
					let tourl =app.globalData.im_url +'h5/#/pages/login/autoindex?im_user_id='+app.globalData.im_user_id+'&chat_user_id='+that.chat_user_id
					    tourl = '/pages/index/webView?url=' + encodeURIComponent(tourl);
					app.goto(tourl,'客服');
					
				}
				//如果 对方没有注册
				else if( (!that.im_user_id || that.im_user_id == 0) && app.globalData.im_url  && app.globalData.im_user_id && app.globalData.im_user_id >0 ){
					let tourl = app.globalData.im_url+'h5/#/pages/login/autoindex?im_user_id='+app.globalData.im_user_id
					    tourl = '/pages/index/webView?url=' + encodeURIComponent(tourl);
					app.goto(tourl,'客服');
				}
				
			},

			showFansPopup() {
				if (this.is_current_user) {


					this.$refs.fansPopup.open()
					this.getFansList()
				}
			},
			showZanPopup() {
				if (this.is_current_user) {
			
			
					this.$refs.zanPopup.open()
					this.getZanList()
				}
			},
			getFollowUserList(loadmore) {
				if (!loadmore) {
					this.follow_user_list_page_num = 1;
					this.followUserList = [];
				}
				var that = this;

				var pagenum = that.follow_user_list_page_num
				that.loading = true;
				that.follow_nodata = false;
				that.follow_nomore = false;

				app.get('ApiLuntan/getFollowUserList', {
					pagenum: pagenum,
				}, function(res) {
					that.loading = false;
					uni.stopPullDownRefresh();
					var data = res.data;
					if (pagenum == 1) {
						that.followUserList = data;
						if (data.length == 0) {
							that.follow_nodata = true;
						}
					} else {
						if (data.length == 0) {
							that.follow_nomore = true;
						} else {
							var datalist = that.followUserList;
							var newdata = datalist.concat(data);
							that.followUserList = newdata;
						}
					}
				});
			},

			getFansList(loadmare) {
			
				var that = this;
				if (!loadmare) {
					this.fans_user_list_page_num = 1;
					this.fansUserList = [];
				}

				var pagenum = that.fans_user_list_page_num
				that.loading = true;
				that.fans_nodata = false;
				that.fans_nomore = false;

				app.get('ApiLuntan/geFansList', {
					pagenum: pagenum,
				}, function(res) {
					that.loading = false;
					uni.stopPullDownRefresh();
					var data = res.data;
					if (pagenum == 1) {
						that.fansUserList = data;
						if (data.length == 0) {
							that.fans_nodata = true;
						}
					} else {
						if (data.length == 0) {
							that.fans_nomore = true;
						} else {
							var datalist = that.fansUserList;
							var newdata = datalist.concat(data);
							that.fansUserList = newdata;
						}
					}
				});
			},
			getZanList(loadmare) {
			
				var that = this;
				if (!loadmare) {
					this.zan_user_list_page_num = 1;
					this.zanUserList = [];
				}
			
				var pagenum = that.zan_user_list_page_num
				that.loading = true;
				that.zan_nodata = false;
				that.zan_nomore = false;
			
				app.get('ApiLuntan/geZanList', {
					pagenum: pagenum,
				}, function(res) {
					that.loading = false;
					uni.stopPullDownRefresh();
					var data = res.data;
					if (pagenum == 1) {
						that.zanUserList = data;
						if (data.length == 0) {
							that.zan_nodata = true;
						}
					} else {
						if (data.length == 0) {
							that.zan_nomore = true;
						} else {
							var datalist = that.zanUserList;
							var newdata = datalist.concat(data);
							that.zanUserList = newdata;
						}
					}
				});
			},

			popupScrollTolower(e, type) {
				console.log("type", type)
				if (type === "follow") {
					this.getFollowUserList(true)
				}
				if (type == 'fans') {
					this.getFansList(true)
				}
				if (type == 'zan') {
					this.getZanList(true)
				}
			},

			doDetail(e) {
				const params = {
					currentTarget: {
						dataset: {
							url: '/activity/luntan/detail?id=' + e.id
						}
					}
				}
				this.goto(params)
			},
		}
	}
</script>

<style>
	.container {}

	.self-margin {
		margin: 0 16rpx;
	}

	.container .user-area {
		width: 100%;
		max-height: 648rpx;
		position: relative;
		height: 648rpx;
	}

	.container .user-area .bg {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;

	}

	.container .user-area .bg image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.container .user-area .bg .bg-mask {
		background: rgba(62, 62, 62, 0.66);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
	}


	.container .user-area .user-area_header {
		text-align: right;
		height: 100%;
		position: relative;
	}

	.container .user-area .user-area_header .setting-icon {
		width: 48rpx;
		height: 48rpx;
		display: inline-block;
		z-index: 9999999;
		position: relative;
		margin-top: 24rpx;

	}

	.container .user-area .user-area_header .setting-icon image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.container .user-area .user-area_header .user-info {
		margin-top: 8rpx;
		position: relative;
		display: flex;
		align-items: center;
	}


	.container .user-area .user-area_header .user-info .avatar {
		width: 128rpx;
		height: 128rpx;
	}

	.container .user-area .user-area_header .user-info .avatar .avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 100%;
		display: block;
		border: 2rpx solid hsla(0,0%,100%,.7);
	}

	.container .user-area .user-area_header .user-info .user-right {
		margin-left: 28rpx;
		text-align: left;
	}

	.container .user-area .user-area_header .user-info .user-right .nickname {
		font-family: 'Inter';
		font-style: normal;
		font-weight: 600;
		font-size: 40rpx;
		/* identical to box height */
        letter-spacing: 2rpx;

		color: #fff;
	}


	.container .user-area .user-area_header .user-info .user-right .member {
		font-family: 'Inter';
		font-style: normal;
		font-weight: 400;
		font-size: 26rpx;
		/* identical to box height */

		text-align: left;
		margin-top: 8rpx;
        color: #e6e6e6;
		letter-spacing: 2rpx;

	}

	.container .user-area .user-area_header .user-info .user-right .member .sex {
		display: inline-block;
		margin-left: 16px;
	}

	.container .user-area .user-area_header .user-info .user-right .member .sex image {
		width: 32rpx;
		height: 32rpx;
	}

	.container .user-area .user-area_header .user-info .user-right .address {
		color: #fff;
		font-size: 24rpx;
		margin-top: 16rpx;
		letter-spacing: 2rpx;
	}


	.container .user-area .user-area_header .user-info .user-right .address text {
		text-overflow: ellipsis;
		width: 264rpx;
		overflow: hidden;
		display: inline-block;
		white-space: nowrap;
		vertical-align: bottom;
	}

	.container .user-area .user-area_header .brief {
		font-family: 'Inter';
		font-style: normal;
		font-weight: 500;
		font-size: 28rpx;
		position: relative;
		color: #F2F2F2;
		text-align: left;
		margin-top: 24rpx;
		margin: 20rpx 100rpx 0 20rpx;
		letter-spacing: 2rpx;

	}

	.container .user-area .user-area_header .bottom {
		display: flex;
		position: absolute;
		bottom: 48rpx;
		justify-content: space-between;
		width: 100%
	}

	.container .user-area .user-area_header .bottom .stats {
		display: flex;
		justify-content: space-between;
		width: 264rpx;
	}


	.container .user-area .user-area_header .bottom .stats .stat-item {
		text-align: center;
		font-size: 30rpx;
	}

	.container .user-area .user-area_header .bottom .stats .stat-item .total {

		color: #FFFFFF;

	}

	.container .user-area .user-area_header .bottom .stats .stat-item .name {


		color: #9B9B9B;
		letter-spacing: 2rpx;
	}

	.container .user-area .user-area_header .bottom .oper {
		display: flex;
		/* justify-content: space-around; */
		align-items: center;

	}

	.container .user-area .user-area_header .bottom .oper .msg-btn {
		margin-left: 16rpx;
	}

	.container .user-area .user-area_header .bottom .oper .msg-btn .btn {
		width: 120rpx;
		height: 56rpx;
		background: rgb(218 218 218 / 24%);
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid hsla(0,0%,100%,.7);
	}

	.container .user-area .user-area_header .bottom .oper .msg-btn .btn image {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}

	.datalist .item2 {
		/* width: 100%; */
		height: auto;
		background: #fff;
		overflow: hidden;
		border-radius: 8rpx;
		/* margin-bottom: 20rpx; */
		position: relative;
		color: #222;
		width: 100%;
		border-top: none;
		padding: 16rpx 24rpx;
	}

	.datalist .item2 .ff {
		width: 100%;
		height: 100%;
		display: block;
	}

	.datalist .item2 .f2 {
		/* position: absolute; */
		bottom: 20rpx;
		left: 20rpx;
		/* display: flex; */
		/* align-items: center; */
		color: #222222;
		font-size: 22rpx
	}

	.datalist .item2 .f2 .t0 {
		/* position: absolute; */
		/* margin-top: -96rpx; */
		font-size: 24rpx;
		word-break: break-all;
		color: #000;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.datalist .item2 .f2 .t1 {
		display: flex;
		align-items: center;
		float: left;
		margin-top: 11rpx;
		text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.12);
	}

	.datalist .item2 .f2 .t2 {
		display: flex;
		margin-top: 16rpx;
		align-items: center;
		float: left;
		margin-left: 30rpx;
		text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.12);
	}

	.datalist .item2 .f2 .t3 {
		float: left;
		display: flex;
		margin-top: 16rpx;
		align-items: center;
		margin-left: 30rpx;
		text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.12);
	}

	.datalist .item2 .f2 .tubiao {
		display: block;
		height: 28rpx;
		width: 28rpx;
		margin-right: 10rpx
	}

	.datalist .item2 .f2 .touxiang {
		display: block;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	/* #ifdef MP-TOUTIAO */
	>>>.item2 {
		/* width: 100%; */
		height: auto;
		background: #fff;
		overflow: hidden;
		border-radius: 8rpx;
		/* margin-bottom: 20rpx; */
		position: relative;
		color: #222;
		width: 100%;
		border-top: none;
		padding: 16rpx 24rpx;
	}

	>>>.item2 .ff {
		width: 100%;
		height: 100%;
		display: block;
	}

	>>>.item2 .f2 {
		/* position: absolute; */
		bottom: 20rpx;
		left: 20rpx;
		/* display: flex; */
		/* align-items: center; */
		color: #222222;
		font-size: 22rpx
	}

	>>>.item2 .f2 .t0 {
		/* position: absolute; */
		/* margin-top: -96rpx; */
		font-size: 24rpx;
		word-break: break-all;
		color: #000;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	>>>.item2 .f2 .t1 {
		display: flex;
		align-items: center;
		float: left;
		margin-top: 11rpx;
		text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.12);
	}

	>>>.item2 .f2 .t2 {
		display: flex;
		margin-top: 16rpx;
		align-items: center;
		float: left;
		margin-left: 30rpx;
		text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.12);
	}

	>>>.item2 .f2 .t3 {
		float: left;
		display: flex;
		margin-top: 16rpx;
		align-items: center;
		margin-left: 30rpx;
		text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.12);
	}

	>>>.item2 .f2 .tubiao {
		display: block;
		height: 28rpx;
		width: 28rpx;
		margin-right: 10rpx
	}

	>>>.item2 .f2 .touxiang {
		display: block;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	/* #endif */



	.popup-container {
		min-height: 1093rpx;
		background-color: #f1f3f5;
		box-sizing: border-box;
		padding: 30rpx 24rpx;
		/* z-index: 99999999999; */
		position: relative;
		bottom: 0;
		border-radius: 32rpx 32rpx 0;
		width: 100%;
	}

	.popup-container .popup-header {
		font-family: 'IM FELL French Canon SC';
		font-style: normal;
		font-weight: 400;
		font-size: 32rpx;
		text-align: center;
		color: #000000;
	}

	.popup-container .popup-main {
		margin-top: 32rpx;

	}

	.popup-container .popup-product-main {
		margin-bottom: 16rpx;
	}

	.popup-container .popup-main .popup-list {
		height: 772rpx;
		margin-top: 20rpx;
	}

	.popup-container .popup-main .shop-list {
		height: 856rpx;
	}
</style>